<template>
  <div class="menu-item" v-if="commpoentType === 'dropdownMenu'">
    <el-icon><component :is="item.icon"></component></el-icon>
    <span class="item" @click="btnClick(item)">{{ item.name }}</span>
  </div>
  <el-button
    v-else
    :type="item.btnType"
    :icon="item.icon"
    :color="item.color"
    plain
    @click="btnClick(item)"
    >{{ item.name }}</el-button
  >
</template>

<script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { parsingJson } from "@/utils/parsing";
import { ElNotification, ElMessageBox } from "element-plus";
import tool from "@/utils/tool";
import {toTab} from './utils/hook.js'
const router = useRouter();
const emit = defineEmits([
  "updateTable",
  "confirmDelClick",
  "openDialog",
  "rowAdd",
]);
const props = defineProps({
  commpoentType: {
    type: String,
    defalut: "button",
  },
  item: {
    type: Object,
    defalut: {},
  },
  selectData: {
    type: Array,
    defalut: [],
  },
});
const dialogData = ref({});
onMounted(() => {});
const btnClick = (item) => {
  if (item.chooseRows == "1") {
    if (!props.selectData) {
      ElNotification({
        title: "Error",
        message: "请选择！",
        duration: 2000,
        type: "error",
      });
      return;
    } else if (props.selectData.length > 1) {
      ElNotification({
        title: "Error",
        message: "只能选择一条记录！",
        duration: 2000,
        type: "error",
      });
      return;
    }
  } else if (item.chooseRows == "2") {
    if (!props.selectData||props.selectData.length===0) {
      ElNotification({
        title: "Error",
        message: "请选择！",
        duration: 2000,
        type: "error",
      });
      return;
    }
  }
  dialogData.value = parsingJson(props.selectData, item); 
  if (item.target == "ajax") {
    if (item.validateExp) {
      if (evalute(item.validateExp, props.selectData) == false) {
        ElNotification({
          title: "操作失败",
          message: "选中记录信息不符合操作规则！",
          duration: 2000,
          type: "error",
        });
        return false;
      }
      // else {
      //     confirm(item)
      // }
    }
    // else {
    confirm(item);
    // }
  } else if (item.target == "dialog") {
    if (item.validateExp) {
      if (evalute(item.validateExp, props.selectData) == false) {
        ElNotification({
          title: "操作失败",
          message: "选中记录信息不符合操作规则！",
          duration: 2000,
          type: "error",
        });
        return false;
      }
      // else {
      //     emit('openDialog', item, dialogData.value)
      // }
    }
    // else {
    emit("openDialog", item, dialogData.value);
    // }
  } else if (item.target == "tab") {
    toTab(item, props.selectData,router);
  } else if (item.target == "edit") emit("rowAdd");
};
const confirm = (item) => {
  if (item.promptStatement) {
    ElMessageBox.confirm(item.promptStatement, "提示", {
      type: "warning",
      confirmButtonText: "确定",
      confirmButtonClass: "el-button--danger",
    })
      .then(() => {
        emit("confirmDelClick", item.url, dialogData.value);
      })
      .catch(() => {});
  } else {
    emit("confirmDelClick", item.url, dialogData.value);
  }
};
//传入的字符串代码限制作用域为选中行数据
const evalute = (code, sandbox) => {
  sandbox = sandbox || Object.create(null);
  const fn = new Function("sandbox", `with(sandbox){return (${code})}`);
  const proxy = new Proxy(sandbox, {
    has(target, key) {
      return true;
    },
  });
  return fn(proxy);
};
</script>
<style lang="less" scoped>
.item {
  display: flex;
  align-items: center;
  white-space: nowrap;
  list-style: none;
  line-height: 22px;
  padding-left: 3px;
  margin: 0;
  font-size: var(--el-font-size-base);
  color: var(--el-text-color-regular);
  cursor: pointer;
  outline: none;
}
.menu-item {
  display: flex;
  align-items: center;
  padding: 5px 16px;
}
.menu-item:hover {
  background-color: #ebf5ff;
}
</style>
